<template>
    <div>
        <!-- 顶部内容 -->
        <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />

        <!-- 商品部分 -->
        <div class="commendProduct">
            <div class="productItem">
                <h6>本商品由美容机构专供</h6>
                <van-swipe :autoplay="3000">
                    <van-swipe-item>
                        <img v-lazy="goods.path" />
                    </van-swipe-item>
                </van-swipe>
                <span class="title">{{goods.title}}</span>
                <hr>
                <div class="startTimes">
                    <span>预售时间：{{2022-3-1 | dateFormat('MM月DD日 hh时')}}</span>
                    <span>限量30000份</span>
                </div>
                <div class="goodsTimes">
                    <span>提货时间：{{2022-3-1 | dateFormat('MM月DD日 hh时')}}</span>
                    <span>今日已售</span>
                </div>
                <div class="volume">
                    <span class="preferential">优惠</span>
                    <span class="fullReduction">全场满19.9减4、满39.9减6</span>
                </div>
                <div class="price">{{goods.price}}</div>
            </div>
        </div>

        <!-- 底部 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
            <van-goods-action-button type="warning" text="加入购物车" @click="toGoodsCart(goods)" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
    import MockService from '../../axios/MockServiceApi'
    export default {
        data() {
            return {
                //商品信息
                goods:{},
            }
        },

        async created() {
            //截取地址栏id号
            let url = window.location.href
            let id=url.split('=')[1]

            //调用接口获取单个商品
            let _result = await MockService.getOnlyGoodsApi(id*1)
            if(_result.code===200){
                this.goods=_result.data
            }
            console.log(this.goods);
        },

        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },

            toGoodsCart(item){
                //将购物项目信息存入vuex中
                let shoppingArr=this.$store.getters['common/getShoppingInfo']||[]
                //判断购物车列表是否存在此商品
                let isHave=shoppingArr.some(function(i){
                    return i.id===item.id
                })
                if(isHave){
                    let index=shoppingArr.findIndex(function(i){
                        return i.id===item.id
                    })
                    shoppingArr[index].num++
                    shoppingArr[index].cheched=false
                }else{
                    item.cheched=false
                    shoppingArr=[...shoppingArr,item]
                }
                this.$toast.success('加入购物车成功')
                this.$store.commit('common/setShoppingInfo',shoppingArr)
            }
        },
    }
</script>

<style lang="less" scoped>
    // 商品部份
    .commendProduct{
        .productItem{
            width: 95%;
            margin: 0 auto 15px;
            padding: 8px 6px 0;
            background-color: #fff;
            border-radius: 6px;
            > h6{
                text-align: center;
                font-size: 0.8rem;
                color: #757575;
                margin: 0;
            }
            > .van-swipe{
                width: 100%;
            }
            > .title{
                display: block;
                font-size: 1rem;
                font-weight: bold;
                margin: 0 0 40px 5px;
            }
            .startTimes{
                display: flex;
                justify-content: space-between;
                > span{
                    color: #A4A4A4;
                    font-size: 0.7rem;
                }
            }
            .goodsTimes{
                display: flex;
                justify-content: space-between;
                > span{
                    color: #A4A4A4;
                    font-size: 0.7rem;
                }
            }
            .volume{
                margin: 10px 0;
                display: flex;
                .preferential{
                    display: block;
                    width: 45px;
                    height: 25px;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 0.8rem;
                    line-height: 25px;
                    text-align: center;
                    background-color: #FD0137;
                }
                .fullReduction{
                    margin-left: 5px;
                    display: block;
                    width: 205px;
                    height: 25px;
                    line-height: 25px;
                    border-radius: 5px;
                    border: 1px solid #FD0137;
                    font-size: 0.8rem;
                    color: #FD0137;
                    text-align: center;
                }
            }
            .price{
                color: #E60012;
                font-size: 1.3rem;
                font-weight: bold;
                &::before{
                    content: '￥';
                    font-size: 0.8rem;
                }
            }
        }
    }
</style>